<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scroll size</title>
    <style type="text/css">
        .wrapper { 
            overflow: scroll;
            border: 2px solid blue ; 
            width: 300px; 
            height: 200px; 
        }
        .inner {
            background: #ff0;
            width: 500px ;
            height: 500px ;
        }
        ul { list-style: none ; margin: 0; padding: 0; }
        ul>li {
            height: 30px ;
            line-height: 30px ;
            margin: 15px 0;
        }
        ul>li:nth-child(2n) { background: #dfdfdf; }
        ul>li:nth-child(2n+1) { background: #a9c4ff; }
        .container { overflow: scroll; width: 500px; height: 200px; border: 1px solid blue ;}
        .container>div { width: 800px; height: 200px; margin-left: 500px; }
        .container>div span { 
            float: left ; 
            width: 200px; 
            height: 200px; 
            background-position: center ;
            background-size: cover ;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>

    <h3>DOM: Element</h3>
    <ul>
        <li>Element.prototype.scrollWidth</li>
        <li>Element.prototype.scrollHeight</li>
        <li>Element.prototype.scrollTop</li>
        <li>Element.prototype.scrollLeft</li>
    </ul>

    <div class="wrapper">
        <div class="inner"></div>
    </div>

    <script type="text/javascript">
        // 使用标签选择器选择页面上首个ul元素
        const unorderedList = document.querySelector( 'ul' );
        // 指定事件类型( click 表示鼠标左键单击事件 , dblclick 表示鼠标左键双击事件 )
        const type = 'click' ;
        // 指定事件监听器
        const listener = {
            handleEvent( event ){
                // 获得 事件目标 (即真正发生type事件的元素)
                let t = event.target ;
                let text = t.innerText ;
                if( text.endsWith( 'Width' ) || text.endsWith( 'Height' ) ) {
                    let x = document.querySelector( '.wrapper' );
                    alert( x.scrollWidth + ' , ' + x.scrollHeight );
                }
                if( text.endsWith( 'Top' ) || text.endsWith( 'Left' ) ) {
                    let x = document.querySelector( '.wrapper' );
                    alert( x.scrollTop + ' , ' + x.scrollLeft );
                }
            }
        }
        // 指定在非捕获阶段处理事件(即在冒泡阶段处理事件)
        const useCapture = false ;
        // 为 事件目标(EventTarget) 绑定事件监听器(EventListener)
        unorderedList.addEventListener( type , listener , useCapture );
    </script>

    <hr>

    <div class="container">
        <div>
            <span style="background-image: url(images/wukong.webp);"></span>
            <span style="background-image: url(images/bailong.webp);"></span>
            <span style="background-image: url(images/wuneng.png);"></span>
            <span style="background-image: url(images/wujing.jpeg);"></span>
        </div>
    </div>

    <script type="text/javascript">
        const c = document.querySelector( '.container' );
        const timer = setInterval( ()=> {
            c.scrollLeft += 1 ;
            if( c.scrollLeft >= 800 ) {
                clearInterval( timer );
            }
        } , 10 );
    </script>
    
</body>
</html>